// pages/category/index.js
import { request } from "../../request/index.js"

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧菜单
    currentIndex: 0
  },
  // 接口的返回数据
  Cates: [],
  onLoad: function (options) {
    /*
    商品数据缓存处理
    0. web的localstory只能存string，而小程序存啥就是啥
    1.先判断一下本地储存有没有就得出数据
    2.没有旧数据，直接发送新请求
    3.悠久的数据，同时就的数据也没过期，就是用本地储存的旧数据即可
    */
    // 1.获取本地数据
    const Cates = wx.getStorageSync("cates")
    // 2.判断
    if (!Cates) {
      // 不存在，发送请求获取数据
      this.getCates()
    } else {
      // 有旧的数据

      // 判断是否过期，定义过期时间10s
      if (Date.now() - Cates.time > 1000 * 10) {
        // 过期了，重新发送请求
        this.getCates()
      } else {
        // 没有过期
        console.log("可以使用旧的数据")
        this.Cates = Cates.data
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map((item) => item.cat_name)
        //构造右侧的商品数据
        let rightContent = this.Cates[0].children
        // 存到data中
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  // 获取分类的数据
  async getCates() {
    const res = await request({
      url: "/categories"
    })
    this.Cates = res
    //把接口数据储存到本地
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates })
    //构造左侧的大菜单数据
    let leftMenuList = this.Cates.map((item) => item.cat_name)
    //构造右侧的商品数据
    let rightContent = this.Cates[0].children
    // 存到data中
    this.setData({
      leftMenuList,
      rightContent
    })
  },
  // 左侧菜单的点击事件
  handleItemTap(e) {
    const { index } = e.currentTarget.dataset
    //构造右侧的商品数据
    let rightContent = this.Cates[index].children
    this.setData({
      currentIndex: index,
      rightContent
    })
  }
})
